<script setup>
import {onMounted, onUnmounted} from 'vue'
import * as echarts from "echarts";
import request from "@/utils/request.js";
import englishToChinese from "@/json/post.js";

onMounted(async () => {
  await initChart01();
  await initChart02();
  await initEcharts03();
  await initEcharts04();
})

onUnmounted(() => {
  myChart1.dispose();
  myChart2.dispose();
  myChart3.dispose();
  myChart4.dispose();
})

var myChart1;
const initChart01 = async () => {
  if (myChart1 != null && myChart1 != "" && myChart1 != undefined) {
    myChart1.dispose();
    console.log(" chart instance dispose ");
  }
  myChart1 = echarts.init(document.getElementById('box1'));
  const option = {
    title: {
      text: '甲板部一般轮船吨位划分最低安全配员'
    },
    legend: {
      data: ['3000吨及以上', '500吨及以上至未满3000总吨', '200吨及以上至未满500总吨', '100吨及以上至未满200总吨', '未满100总吨'],
      orient: "vertical",
      left: '0',
      top: '10%'
    },

    radar: {
      // shape: 'circle',
      indicator: [
        {name: '船长', max: 2},
        {name: '大副', max: 2},
        {name: '二副', max: 2},
        {name: '三副', max: 2},
        {name: '高级值班水手', max: 2},
        {name: '值班水手', max: 2},
        {name: '驾驶员', max: 2}
      ]
    },
    series: [
      {
        name: '雷达图',
        type: 'radar',
        data: [
          {
            value: [1, 1, 1, 1, 2, 1, 0],
            name: '3000吨及以上'
          },
          {
            value: [1, 1, 0, 1, 2, 1, 0],
            name: '500吨及以上至未满3000总吨'
          },
          {
            value: [1, 0, 0, 1, 0, 2, 0],
            name: '200吨及以上至未满500总吨'
          },
          {
            value: [1, 0, 0, 1, 0, 1, 0],
            name: '100吨及以上至未满200总吨'
          },
          {
            value: [0, 0, 0, 0, 0, 1, 1],
            name: '未满100总吨'
          }
        ]
      }
    ]
  };
  option && myChart1.setOption(option);

}

var myChart2;
const initChart02 = async () => {
  if (myChart2 != null && myChart2 != "" && myChart2 != undefined) {
    myChart2.dispose();
    console.log(" chart instance dispose ");
  }
  myChart2 = echarts.init(document.getElementById('box2'));
  const option = {
    title: {
      text: '轮机部一般轮船总机功率划分最低安全配员',
    },
    legend: {
      data: ['3000千瓦及以上', '750千瓦以上至未满3000千瓦', '220千瓦及以上至未满750千瓦', '75千瓦及以上至未满220千瓦', '未满75千瓦'],
      orient: "vertical",
      right: '0',
    },
    grid: {
      left: '10%', // 距离左侧的距离
      right: '30%', // 距离右侧的距离
      bottom: '0%', // 距离底部的距离
      containLabel: true
    },
    radar: {
      shape: 'circle',
      indicator: [
        {name: '轮机长', max: 2},
        {name: '大管轮', max: 2},
        {name: '二管轮', max: 2},
        {name: '三管轮', max: 2},
        {name: '高级值班机工', max: 2},
        {name: '值班机工', max: 2},
        {name: '轮机员', max: 2}
      ]
    },
    series: [
      {
        name: '雷达图',
        type: 'radar',
        data: [
          {
            value: [1, 1, 1, 1, 1, 2, 0],
            name: '3000千瓦及以上'
          },
          {
            value: [1, 1, 0, 0, 1, 1, 0],
            name: '750千瓦以上至未满3000千瓦'
          },
          {
            value: [1, 0, 0, 1, 0, 2, 0],
            name: '220千瓦及以上至未满750千瓦'
          },
          {
            value: [0, 0, 0, 0, 0, 1, 1],
            name: '75千瓦及以上至未满220千瓦'
          },
          {
            value: [0, 0, 0, 0, 0, 1, 0],
            name: '未满75千瓦'
          }
        ]
      }
    ]
  };
  option && myChart2.setOption(option);

}

const DataProduce01 = (jsonObject, translate) => {
  var tmpArray = []
  var name = []
  var values = []
  Object.keys(jsonObject).forEach(function (key) {
    name.push(translate[key] || key)
    values.push(jsonObject[key])
  })
  tmpArray.push(name)
  tmpArray.push(values)
  return tmpArray
}

var myChart3;
// 甲板部拖船最低安全配员标准(区别海上和港内)
const initEcharts03 = async () => {
  if (myChart3 != null && myChart3 != "" && myChart3 != undefined) {
    myChart3.dispose();
    console.log(" chart instance dispose ");
  }
  myChart3 = echarts.init(document.getElementById('box3'));
  var jsonObject = await request.get("/deck/Tugboat/sea");
  myChart3.setOption(
      {
        title: {
          text: "海上拖船甲板部最低安全配员标准",
          right: "0"
        },
        xAxis: {
          type: 'category',
          data: DataProduce01(jsonObject['below3000'], englishToChinese)[0],
          axisLine: {
            // lineStyle: {
            //   color: "#ccc",
            // }
          }
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          x: "1%",
          // textStyle: {
          //   color: '#ccc'//字体颜色
          // },
        },
        grid: {
          top: '13%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: "3000千瓦以下 ",
            data: DataProduce01(jsonObject['below3000'], englishToChinese)[1],
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#83bff6'},
                {offset: 0.5, color: '#188df0'},
                {offset: 1, color: '#188df0'}
              ])
            },
            label: {
              show: true,
              position: 'inside'
            },
          },
          {
            name: "3000千瓦以上",
            data: DataProduce01(jsonObject['over3000'], englishToChinese)[1],
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#a8c0ff'},
                {offset: 0.7, color: '#4e54c8'},
                {offset: 1, color: '#3f2b96'}
              ])
            },
            label: {
              show: true,
              position: 'inside'
            },
          },
        ]
      }
  );
}

var myChart4;
const initEcharts04 = async () => {
  if (myChart4 != null && myChart4 != "" && myChart4 != undefined) {
    myChart4.dispose();
    console.log(" chart instance dispose ");
  }
  myChart4 = echarts.init(document.getElementById('box4'));
  var jsonObject = await request.get("/deck/Tugboat/port");
  myChart4.setOption(
      {
        title: {
          text: "港内拖船甲板部最低安全配员标准",
          right: "0"
        },
        xAxis: {
          type: 'category',
          data: DataProduce01(jsonObject['below750'], englishToChinese)[0],
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          x: "1%",
          // textStyle: {
          //   color: '#ccc'//字体颜色
          // },
        },
        grid: {
          top: '13%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: "750千瓦以下 ",
            data: DataProduce01(jsonObject['below750'], englishToChinese)[1],
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#83bff6'},
                {offset: 0.5, color: '#188df0'},
                {offset: 1, color: '#188df0'}
              ])
            },
            label: {
              show: true,
              position: 'inside'
            },
          },
          {
            name: "750千瓦以上",
            data: DataProduce01(jsonObject['over750'], englishToChinese)[1],
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#a8c0ff'},
                {offset: 0.7, color: '#4e54c8'},
                {offset: 1, color: '#3f2b96'}
              ])
            },
            label: {
              show: true,
              position: 'inside'
            },
          },
        ]
      }
  );
}
</script>

<template>
  <div class="app-wrapper">

    <div class="container01">
      <div id="box1"></div>
      <div id="box2"></div>
    </div>

    <div class="container02">
      <div id="box3"></div>
      <div id="box4"></div>
    </div>

  </div>
</template>

<style lang="scss" scoped>
.app-wrapper {
  height: 100%;
  width: 100%;
  padding: 1%;
  background-color: white;

  .container01 {
    width: 100%;
    height: 55%;
    display: flex;
    flex-direction: row;

    #box1 {
      width: 50%;
      height: 100%;
    }

    #box2 {
      width: 50%;
      height: 100%;
    }

  }

  .container02 {
    width: 100%;
    height: 45%;
    display: flex;
    flex-direction: row;

    #box3 {
      width: 50%;
      height: 100%;
    }

    #box4 {
      width: 50%;
      height: 100%;
    }

  }

}
</style>